Vue cli

而上次有提到要用vue cli建構chrome extension，而且網路上有許多模板可以操作，

我就順便整理了一些比較熱門的模板，分別是

superoo7 大大的 vue-cli-plugin-chrome-ext Github

Kocal 大大的 vue-web-extension - Github

adambullmer 大大的 vue-cli-plugin-browser-extension - Github

那我們今天就先用superoo7大大的插件來試試看開發Vue專案吧！

首先，還是要先裝好vue cli，但我電腦已經有了所以略過(不會用的看這裡)
直接建立一個新專案吧

vue create vue-test-ext

接下來就是套用 vue-cli-plugin-chrome-ext

vue add chrome-ext

然後會有一些資料要輸入，例如你是用TypeScript 還是 JavaScript

然後打開vs code觀察一下有什麼東西可以用

原來跟一般的vc專案一樣會有模式的差別，manifest的dev版多了一行，為了讓我們可以繞過chrome的安全性政策做測試

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

而且看了一下pagckage.json還多了一行指令build-watch，根據官方文件，似乎是可以直接監控變動，然後封裝成你的chrome extension

    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-watch": "vue-cli-service build-watch"

接下來是vue.config，目前只有這簡單的部分，讓我們在封裝的時候看是哪個檔案做切換用的

const plugins =
  process.env.NODE_ENV === "production"
    ? [
        {
          from: path.resolve("src/manifest.production.json"),
          to: `${path.resolve("dist")}/manifest.json`
        }
      ]
    : [
        {
          from: path.resolve("src/manifest.development.json"),
          to: `${path.resolve("dist")}/manifest.json`
        }
      ];

那我們就直接執行看看，結果會如何

npm run build-watch

看來結果會匯出在dist資料夾內，直接載入chrome extension套件試試看

後來發現他是直接建立了兩個資料夾options以及popup，並且在裡面各自new Vue物件，
(所以根目錄的./src/main.js就是沒有用處了)
原本以為是用vue cli的大架構，然後只把部分compoment匯出，
所以如果要使用的人要謹慎評估一下喔～

題外話

昨天，算是告一個段落了，未來應該還會繼續優化與維護那個系統，也順便希望大家多多支持囉！